<template>
	<view class="custom-swiper">
			<u-swiper
					radius="10"
					height="250"
					:list="list1"
					@change="change"
					@click="click"
					indicator
					indicatorMode="line"
					imgMode="aspectFill"
					:autoplay="true"
					:previousMargin="80"
					:nextMargin="80"
					:circular="true"
					
			></u-swiper>
		
		<!-- 分类标签 -->
		<view style="background-color: #fff;width: 100%;display: flex;justify-content: center;">
			<u-tabs :list="tabList" @click="click" @change="(value)=>{tabIndex = value.index}"
					
			        lineWidth="50rpx"
					lineHeight="8rpx"
			        lineColor="#f56c6c"
			        :activeStyle="{
			            color: '#000000',
			            fontWeight: 'bold',
			            transform: 'scale(1.0)',
						fontSize:'30rpx',
						
			        }"
			        :inactiveStyle="{
			            color: '#87898f',
			            transform: 'scale(1.0)',
						fontSize:'30rpx',
			        }"
			        itemStyle="padding-left: 15px; padding-right: 15px;;height: 80rpx;"
			></u-tabs>
		</view>
		
		<!-- 我发布的列表 -->
		<view v-if="tabIndex == 0" v-for="i in 1">
			<!-- 卡片 -->
			<view style="padding: 24rpx;background-color: #fff;border-radius: 10rpx;box-shadow: 1px 1px 1px #eee;margin: 16rpx 16rpx;">
				<view style="padding-bottom: 20rpx;display: flex;font-size: 30rpx;font-weight: bold;">
					银行卡打卡信息
				</view>
				
				<view style="padding-bottom: 20rpx;display: flex;justify-content: space-between;font-size: 20rpx;">
					<view style="color: #9c9c9c;">
						<span>前天</span>
						 <span style="margin-left: 10rpx;">11:18</span>
						 <span style="margin-left: 10rpx;">填表</span> 
					</view>
					
					<view style="color: #9c9c9c;">
						<span>浏览 31</span>
						 <span style="margin-left: 20rpx;">参与2</span>
					</view>
				</view>
				
				<view style="color:#676767;display: flex;justify-content: space-between;padding: 0 20rpx;">
					<view style="display: flex;align-items: center"><u-icon style="display: inline-block;padding-right:10rpx ;" name="share-square" color="#ff8725d4" size="35"></u-icon> 邀请填写</view>
					<view style="display: flex;align-items: center"><u-icon style="display: inline-block;padding-right:10rpx ;" name="list" color="#ff8725d4" size="35"></u-icon> 数据表格</view>
					<view style="display: flex;align-items: center"><u-icon style="display: inline-block;padding-right:10rpx ;" name="more-circle" color="#ff8725d4" size="35"></u-icon> 更多</view>
				</view>
			</view>
		</view>
		
		<!-- 我参与的列表 -->
		<view v-if="tabIndex == 1" v-for="i in 3">
			<!-- 卡片 -->
			<view style="padding: 24rpx;background-color: #fff;border-radius: 10rpx;box-shadow: 1px 1px 1px #eee;margin: 16rpx 16rpx;">
				<view style="padding-bottom: 20rpx;display: flex;font-size: 30rpx;font-weight: bold;">
					银行卡打卡信息
				</view>
				
				<view style="padding-bottom: 20rpx;display: flex;justify-content: space-between;font-size: 20rpx;">
					<view style="color: #9c9c9c;">
						<span>前天</span>
						 <span style="margin-left: 10rpx;">11:18</span>
						 <span style="margin-left: 10rpx;">填表</span> 
					</view>
					
					<view style="color: #9c9c9c;">
						<span>浏览 31</span>
						 <span style="margin-left: 20rpx;">参与2</span>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 我收藏的列表 -->
		<view v-if="tabIndex == 2" v-for="i in 5">
			<!-- 卡片 -->
			<view style="padding: 24rpx;background-color: #fff;border-radius: 10rpx;box-shadow: 1px 1px 1px #eee;margin: 16rpx 16rpx;">
				<view style="padding-bottom: 20rpx;display: flex;font-size: 30rpx;font-weight: bold;">
					银行卡打卡信息
				</view>
				
				<view style="padding-bottom: 20rpx;display: flex;justify-content: space-between;font-size: 20rpx;">
					<view style="color: #9c9c9c;">
						<span>前天</span>
						 <span style="margin-left: 10rpx;">11:18</span>
						 <span style="margin-left: 10rpx;">填表</span> 
					</view>
					
					<view style="color: #9c9c9c;">
						<span>浏览 31</span>
						 <span style="margin-left: 20rpx;">参与2</span>
					</view>
				</view>
			</view>
		</view>
		
		<view @click="onAdd" style="width: 100rpx;height: 100rpx;position: fixed;right:50rpx;bottom: 50rpx;;display: flex;justify-content: center;align-items: center;background-color: #ffaa00;border-radius: 100rpx;">
			<u-icon name="plus" color="#fff" size="45"></u-icon>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex:0,
				tabList: [{
				    name: '我发布的',
				}, {
				    name: '我参与的',
				}, {
				    name: '我收藏的',
				}],
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				]
			}
		},
		methods: {
			onAdd()
			{
				uni.navigateTo({
					url:"/pages/job/publish/publish"
				})
				console.log('create')
			},
			change(value){
				console.log(value)
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep [class^="u-swiper__wrapper__item__wrapper__"]  {
		height: 100% !important;
		// width: 100% !important;
	}
</style>

